<template>
<div v-show="dialogVisible">
		<div class="smp_panel_body innerTabs_2">

			<el-tabs v-model="activeName" @tab-click="handleTabClick">
				<el-tab-pane label="月视图" name="day">
						<div style="margin-top:15px">
					<el-form :inline="false" label-width="76px" size="mini" ref="form" :model="form">
						
						<el-row >
							
									
								<!-- 	<el-col :span="6">
									  <el-form-item label="需求类型:" :label-col="{ span: 5 }" :wrapper-col="{ span: 16  }">
										<el-select defaultValue="0" v-model="query.body.qmsType"  style="width: 100%"  >
										  <el-option key="0" label="aaa" value="aaa"/>
										  <el-option key="1" label="bbb" value="bbb"/>
										</el-select>
									  </el-form-item>
									</el-col> -->
									
									<el-col :span="6">
									  <el-form-item label="需求状态:" :label-col="{ span: 5 }" :wrapper-col="{ span: 16  }">
										<el-select defaultValue="0" v-model="query.body.status"  style="width: 100%"  >
										  <el-option v-for="item in dict('SMP0007')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
										</el-select>
									  </el-form-item>
									</el-col>
									
									<el-col :span="6">
										<el-form-item label="月份:" :label-col="{ span: 5 }" :wrapper-col="{ span: 16  }">
											<el-date-picker style="width: 100%" v-model="query.body.updateTime" type="month"  value-format="yyyy-MM-dd 00:00:00" placeholder="选择月"></el-date-picker>
											
										</el-form-item>
									</el-col>
						
								<el-col :span="6">
								
										<searchButtonGroup @search="onSubmit" @reset="reset" online />
								</el-col>
							</el-form-item>
						</el-col>
						</el-row>
					</el-form>
					</div>
					<div class="calendarDay" >
					<el-calendar v-model="cdate">
						<template slot="dateCell" slot-scope="{date,data}">
							<div style="text-align: center;" :class="data.isSelected ? 'is-selected' : ''">
								{{data.day.split('-').slice(2).join('-')}}
								<!-- <div v-for="item in calendarList" :key="item.index">
									 {{item.qmsNo}}
									 <span v-if="item.applyDate == data.day">
										<a href="javascript:;" 
											size="mini"
											type="primary"
											:underline="false"
											style="font-size: 10px;"
											@click="guanlList(item.id)">{{item.qmsNo}}</a>
									</span>
								</div> -->
								   <div  style="text-align: center;margin:auto">
									<el-tooltip  v-for="item in calendarList" class="item" placement="top" :content="item.qmsName" v-if="(item.updateTime || '').split(' ')[0] == data.day" >
									<el-link class="aa" :key="item.index"  style="font-size: 11px;line-height: 20px;"  type="primary" :underline="false"  :href="'#/main/requireManage/requirementList/requirementDetails?qmsNo='+item.qmsNo+'&batchNum='+item.batchNum"  >{{item.qmsNo}}_{{item.batchNum|dictName("SMP0010")}}_{{item.status|dictName("SMP0007")}}</el-link>
								 </el-tooltip>
								 <!-- <el-link style="font-size: 12px;" v-if="(item.updateTime || '').split(' ')[0] == data.day"  type="primary" :underline="false" >{{item.qmsNo}}</el-link> -->
								 
								 
								 
								  <!--  <el-link style="font-size: 13px;" v-if="item.prodDate == data.day"  type="warning" :underline="false" >{{item.qmsName}}_第一批次_投产</el-link>
								    <el-link style="font-size: 13px;" v-if="item.testDate == data.day"  type="success" :underline="false" >{{item.qmsName}}_第二批次_提测</el-link> -->
								</div>
							</div>
						</template>
					</el-calendar> 
					</div>
				</el-tab-pane>

				<el-tab-pane label="日视图" name="month">
					<demandCalendarDay></demandCalendarDay>
					
				</el-tab-pane>
				
			</el-tabs>
		
	</div>
</div>
</template>

<script>
	"use strict";
	import {getDemandCalendar} from '@/api/demand.js';
 	import demandCalendarDay from '../demandCalendarDay'; 
	
	export default {
		components: {
			 demandCalendarDay

		},
		data() {
			return {
				total:0,
				activeName:'day',
					calendarList: [], 
					query: {
						id:'',
						body:{
							updateTime:'',
							status:'',
						},
					},
					dialogVisible:false,
					showVisible: false,
					record: {},
					cdate:new Date()
				
			};
	
	
	
		},
		created() {
			this.dialogVisible = true;
			
			
			if(this.$route.query.activeName){
				this.activeName=this.$route.query.activeName;
			}else{
				this.activeName="day";
			}
			
			Object.assign(this.query.body,this.$route.query.day);
			this.getList()
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
	
			onSubmit() {
				this.getList();
			},
	
			handleClick() {
				this.dialogVisible = true;
			},
			
			handleEdit(index,row){
				this.dialogVisible = true;
			},
	
	
			// getUserList(query) {
			// 	if (query == '黄') {
			// 		this.options = [{
			// 			value: '1001',
			// 			label: '黄杰',
			// 			dep: '核心应用开发部'
			// 		}, {
			// 			value: '1002',
			// 			label: '黄亚平',
			// 			dep: '数据开发部'
			// 		}]
			// 	} else if (query == '李') {
			// 		this.options = [{
			// 			value: '1001',
			// 			label: '李二红',
			// 			dep: '运维管理部'
			// 		}]
			// 	} else {
			// 		this.options = [];
			// 	}
			// },
			
			// getrequireList(query) {
			// 	if (query == '1142') {
			// 		this.requireNooptions = [{
			// 			value: 'REQM2022_1142_ESBYX_0003',
			// 			label: 'REQM2022_1142_ESBYX_0003',
			// 			name: '外部数据接入新增接口（企业服务总线（ESB）配合）'
			// 		}]
			// 	}  else {
			// 		this.requireNooptions = [];
			// 	}
			// },
	
			reset() {
				this.query.body =   {
					}
			},
			
			getList() {
				getDemandCalendar(this.query.body).then(response => {
					this.calendarList = response.data.extend
					this.cdate = this.query.body.updateTime;
					
					
					let yue ={};
					if(this.$route.query.yue){
						Object.assign(yue,this.$route.query.yue);
					}
					let day={};
					Object.assign(day,this.query.body);
					
					this.$router.push({query:{activeName:'day',day:{},yue:{}}});
					this.$route.query.day=day;
					this.$route.query.yue=yue;
					
										
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			
			guanlList(id) {
				// alert(1111);
				/* this.$refs.demandDetails.guanlxuq(row); */
				// alert(id);
				// this.query.id=id;
				// this.$router.push({name:'demandDetails',params:{"id":id}})
				// this.$router.push({name: 'demandDetails',query: Object.assign(this.query)})
			},
			
			dayCalendar(){
				this.$router.push({name:'demandCalendarDay'})
			},
			
			handleTabClick(){
				console.log(this.activeName);
				this.$route.query.activeName = this.activeName;
			}
		}
	}
</script>

<style scoped>
	
	.calendarDay{
		margin-bottom: 15px;
	} 
	
	.calendarDay .el-calendar__body{
		padding:0;
	}
	
	.aa:hover{
			color:rgba(34, 135, 158, 1.0);
	}
	
	
	div ::v-deep th.gutter{
		display: initial;
	}
	
	div ::v-deep .el-calendar-day{
		min-height: 50px;
		height: inherit !important; 
		position: relative;
		z-index: inherit;
	} 
	
	.is-selected {
		color: #1989FA;
	}
	/* .test /deep/  .el-calendar-table  .el-calendar-day{
		width: 100px;
		height: 200px;
	} */
</style>
